import React,{ useEffect, useState } from 'react'
import { 
  getPlaylist, 
  createPlaylist, 
  deletePlaylist, 
  updatePlaylist, 
  getPlaylistComment,
  getPlaylistDetail } from '@/api/user'
import { 
  Card, 
  Row, 
  Col, 
  Button, 
  Drawer, 
  Modal, 
  Space, 
  List, 
  Image, 
  Typography } from 'antd'
import parseTime from './UserPlayListFn'
import { 
  PlusCircleOutlined, 
  FormOutlined, 
  MinusCircleOutlined, 
  FullscreenOutlined, 
  CommentOutlined, 
  LikeOutlined } from '@ant-design/icons'
import Input from 'antd/es/input/Input'
import { useNavigate } from 'react-router-dom'


export default function UserPlayList() {

  const [playlistEle,setPlaylistEle] = useState()
  const [open,setOpen] = useState(false)
  const [addName,setAddName] = useState()
  const navigate = useNavigate()

  const { Meta } = Card;
  const { Link } = Typography;


  useEffect(()=>{
    getPlaylistFn()
  },[])

  
  //获取歌单列表
  const getPlaylistFn = () =>{
    // console.log('loca-----------',(JSON.parse(localStorage.getItem('userInfo'))).userId);
    getPlaylist((JSON.parse(localStorage.getItem('userInfo'))).userId).then((res)=>{
      // console.log('res',res);
      setPlaylistEle(res?.data?.playlist.slice(0,20))
    })
  }
  
  
  //新建歌单
  const createPlaylistFn = ()=>{ 
    createPlaylist(addName).then(()=>{
      console.log(addName);
    })
    setOpen(false)
    setAddName('')   
    getPlaylistFn()
  }

  //更新歌单
  const [isModalOpen,setIsModalOpen] = useState()
  const [uqdateName,setUqdateName] = useState()
  const [id,setId] = useState()
  const [uqdateDesc,setUqdateDesc] = useState()

  const onUpdate = ()=>{
    const result = {id:id,name:uqdateName,desc:uqdateDesc,tags:'古风'}
    console.log('id',result.id);
    updatePlaylist(result).then((res)=>{
      console.log(res);
    })
    setIsModalOpen(false)
    setUqdateName('')
    setId('')
    setUqdateDesc('')
  }

  //获取歌单评论
  const [comments,setComments] = useState()
  const [isComment,setIsComment] = useState(false)

  const getComment = (id)=>{
    getPlaylistComment(id).then((res)=>{
      setComments(res.data.comments)
      console.log('评论',res.data.comments);
      setIsComment(true)
    })
  }

  //获取歌单详情
  const [getAllDetail,setGetAllDetail] = useState()
  const [isDetail,setIsDetail] = useState(false)

  const getDetail = (id)=>{
    getPlaylistDetail(id).then((res)=>{
      console.log(res);
      setGetAllDetail(res.data.playlist.tracks)
      setIsDetail(true)
    })
  }


  return (
    <>
      {/* 添加按钮 */}
      <Button 
        onClick={(()=>setOpen(true))} 
        style={{color:'blue',marginRight:"10px",marginLeft:'15%',width:"100px"}} 
        icon={<PlusCircleOutlined />}
      />
      {/* 添加按钮的抽屉 */}
      <Drawer title="添加歌单" placement="right" onClose={()=>setOpen(false)} open={open}>
        <Input placeholder='新的歌单名' value={addName} onChange={(e)=>{setAddName(e.target.value)}}></Input>
        <Button style={{marginTop:'5%'}} onClick={()=>createPlaylistFn()}>添加</Button>
      </Drawer>
      {
        playlistEle?.map((item)=>{
          return (
            <Row gutter={16} key={item.id} style={{position:'relative'}}>
              {/* 图片模块 */}
              <Col span={10}>
                <Card
                  hoverable
                  style={{ width: 230,marginLeft:"60%",marginTop:"6%"}}
                  cover={<img alt="example" src={item.coverImgUrl} />}
                >
                  <Meta title={item.name} description={item.creator.nickname+parseTime(item.createTime)+'创建'} />
                </Card>
              </Col>
              {/* 介绍模块 */}
              <Col span={12} style={{display:"flex",alignItems:"center",marginLeft:"-6%"}}>
                <Card title="歌单 介绍" bordered={false}>
                  {item.description ? item.description : '一盏离愁圈寂夜，泪光闪烁半边衣。世间可有双全法，星月相随永久期。-----------后面还有很多内容'}
                  <div style={{marginTop:"10px"}}>
                    {/* 更新歌单列表按钮 */}
                    <Button 
                      onClick={(()=>{return(setIsModalOpen(true),setId(item.id))})} 
                      style={{color:'blue',marginRight:"10px"}} 
                      shape='circle' 
                      icon={<FormOutlined />}
                    />
                    {/* 删除按钮 */}
                    <Button 
                      onClick={(()=>deletePlaylist(item.id))} 
                      style={{color:'red',marginRight:"10px"}} 
                      shape='circle' 
                      icon={<MinusCircleOutlined />}
                    />
                    {/* 评论按钮 */}
                    <Button 
                      onClick={(()=>getComment(item.id))} 
                      style={{color:'red',marginRight:"10px"}} 
                      shape='circle' 
                      icon={<CommentOutlined />}
                    />
                    {/* 跟单详情按钮 */}
                    <Button 
                      onClick={(()=>getDetail(item.id))} 
                      style={{color:'red',marginRight:"10px"}} 
                      shape='circle' 
                      icon={<FullscreenOutlined />}
                    />
                  </div>
                </Card>
              </Col>
            </Row>
            
          )
        })
      }
      {/* 更新歌单的id,名字,描述和标签 */}
      <Modal footer={null} title="编辑歌单信息" open={isModalOpen} onCancel={()=>{
        setIsModalOpen(false)
      }}>
        <Space direction='vertical' style={{display:'flex'}}>
          <Input disabled placeholder='歌单id名' value={id}/>
          <Input placeholder='歌单名字' value={uqdateName} onChange={(e)=>setUqdateName(e.target.value)}/>
          <Input placeholder='歌单描述' value={uqdateDesc} onChange={(e)=>setUqdateDesc(e.target.value)}/>
          <Input disabled placeholder='歌单类别'/>
          <Button 
            type='primary' 
            onClick={onUpdate}>开始更新</Button>
        </Space>
      </Modal>
      {/* 评论界面 */}
      <Modal footer={null} title="歌单评论" open={isComment} onCancel={()=>
        setIsComment(false)} width='900px'>
        <List 
          dataSource={comments}
          renderItem={(item)=>(
            <List.Item key={item.parentCommentId
            }>
              <Image
                width={80}
                src={item.user.avatarUrl} 
                style={{marginRight:'15px'}}/>
                <List.Item.Meta 
                  style={{marginLeft:'20px'}} 
                  title={
                    <p style={{marginBottom:'16px'}}>
                      <Link href=''>{item.user.nickname}</Link> : {item.content}
                    </p>} 
                  description={
                    <p style={{marginTop:'20px'}}>{item.timeStr}
                    </p>}/>
                <div style={{marginTop:'70px'}}><p><LikeOutlined />({item.likedCount}) | 回复</p></div>
            </List.Item>
          )}
        />
      </Modal>
      {/* 歌单详情界面 */}
      <Modal footer={null} title="歌单详情" open={isDetail} onCancel={()=>
        setIsDetail(false)} width='700px'>
        <List 
          dataSource={getAllDetail}
          renderItem={(item)=>(
            <List.Item key={item.parentCommentId
            }>
              <Image
                width={80}
                src={item.al.picUrl} 
                style={{marginRight:'15px'}}/>
                <List.Item.Meta 
                  style={{marginLeft:'20px'}} 
                  title={
                    <p style={{marginBottom:'16px'}}>
                      <Link href='' onClick={()=>navigate(`/songs/details/${item.id}`)}>{item.name}</Link> : {item.ar[0].name}
                    </p>} 
                  description={
                    <p style={{marginTop:'20px'}}>{item.al.name}
                    </p>}/>
            </List.Item>
          )}
        />
      </Modal>
    </>
  )
}
